<template>
		<!-- 投票 wwl -->
	<page ref='page'>
			
			
			<block >
				<view class="list1" v-if='total > 0 ' style="padding-bottom: 45px;">
				<!-- 加载 -->
				<!-- <maoeu-loading ref="loading"></maoeu-loading> -->
					<view class="row" v-for='(row,i) in list' :key='i' >
						<view class="top">
							<view class="left left2" >
								<text class="name">状态：{{row.status == 1 ? '未结束' : row.status == 2 ? '已结束' : '已删除' }}</text>
							</view>
							<view class="right" >
								<text class="name">{{row.created_at}}</text>
							</view>
						</view>
						<view class="info">
							<view class="info_row1">
								{{row.type == 1 ? '普通投票' : '特殊投票'}}：{{row.content}}
							</view>
							<view class="info_row2 img_list" v-if="row.type == 2" >
								<view class="">
									<image :src="row.img_url" v-if="row.vote_sort == 1" @click="bannarclickImg(row,row.vote_sort_ye,row.vote_sort)" class="img" mode="scaleToFill"></image>
									<image :src="row.vote_jinxin_img_time" v-if="row.vote_sort > 1" @click="bannarclickImg(row,row.vote_sort_ye,row.vote_sort)" class="img" mode="scaleToFill"></image>
								</view>
								<view class="" v-for='(rowss,iss) in row.signature_img_time' :key='iss' @click="bannarclickImg(row,row.vote_sort_ye,row.vote_sort)" v-if="row.vote_sort_ye > 1">
									<image :src="rowss"  class="img" mode="scaleToFill"></image>
								</view>
							</view>
						</view>
						<view class="info toup" v-if="row.type == 1">
							<view class="img_row toupiao" v-for="(rows,index) in row.vote_text" :key='index' @click="onedit(row.id,index)">
								<button class="toupiaomingc" :loading='loading' >{{index}}</button>
								<text class="toupiaonum">{{rows}}</text>
							</view>
						</view>
						<view class="info toup" v-if="row.type == 2">
							<view class="img_row toupiao"  @click="ondetail(row)" v-if="row.voteyes == 0">
								<button class="toupiaomingc" :loading='loading' >去签名</button>
							</view>
							<view class="img_row toupiao"  v-if="row.voteyes == 1">
								<button class="toupiaomingc2" :loading='loading' >已签名</button>
							</view>
						</view>
					</view>
				</view>
				<empty v-else/>
			</block>
			<!-- <view class="tiaoz"  @click="tiaoz" >返回首页</view> -->
	</page>
		
	
</template>

<script>
	import {
		getUserInfo,getvote_list,getvote_edit
	} from '@/utils/getRequest.js'
	
	export default{
		data(){
			return {
				type:null,
				list:[],
				page:1,
				size:10,
				total:0,
				loading:false,
				choiceInfo:null,
			}
		},
		
		methods:{
			//跳转签名
			ondetail(row) {
				uni.navigateTo({
					url: '/pagesMy/vote/detail?id='+row.id+'&bgUrl='+row.img_url+'&vote_sort='+row.vote_sort+'&type='+row.type
				});
			},
			tiaoz() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			bannarclickImg(res,vote_sort_ye,vote_sort) {
				
				let imgurls = [];
				if(vote_sort == 1){
					imgurls.push(res.img_url);
				}else{
					imgurls.push(res.vote_jinxin_img_time);
				}
				if(vote_sort_ye > 1){
					res.signature_img_time.forEach(item => {
						imgurls.push(item);
					})
					
				}
				console.log(imgurls,'轮播图放大');
				uni.previewImage({
					indicator:"default",
					current: 0,
					urls: imgurls,
					loop: true
				});
			},
			//提交投票
			onedit(id,index){
				console.log(id,'跳转')
				console.log(index,'跳转')
				uni.showLoading()
				this.loading = true
				
				this.getvote_edit(id,index);
				// try {
				// 	const _this = this;
				// 	_this.$apiResquest({
				// 		url: 'cms/getvote_edit',
				// 		query: {
				// 			token: _this.token,
				// 			id: id,
				// 			vote_text: index
				// 		},
				// 		method: 'GET'
				// 	}).then(function(res) {
				// 		console.log(res,'投票操作');
						
				// 		if(res.data == 1){
				// 			uni.showToast({
				// 				title:'投票成功',
				// 				icon:'success'
				// 			})
				// 			// 需要刷新页面
				// 			setTimeout(()=>{
				// 				uni.hideLoading()
				// 				_this.loading = false
				// 				_this.getList()
				// 			},1000)
							
				// 		}else if(res.data == 2){
				// 			uni.showToast({
				// 				title:'不可重复投票',
				// 				icon:'error'
				// 			})
				// 			uni.hideLoading()
				// 			_this.loading = false
				// 		}
						
						
				// 		// _this.$refs.loading.closeLoading()
						
				// 	})
					
				// } catch {
				// 	uni.hideLoading()
				// 	this.loading = false
				// }
			},
			async getList() {
				uni.showLoading()
				var res = await getvote_list()
					
				console.log(res,'房屋档案列表');
				if(res.code == 200){
					this.total = res.data.count;
					this.list = res.data.list;
				}else{
					uni.showToast({
						title:res.msg
					})
				}
				
					
				uni.hideLoading()
			},
			//提交投票
			async getvote_edit(id,index) {
				uni.showLoading()
				var res = await getvote_edit({id:id,index:index})
				console.log(res,'投票操作');
				
				if(res.data == 1){
					uni.showToast({
						title:'投票成功',
						icon:'success'
					})
					// 需要刷新页面
					setTimeout(()=>{
						uni.hideLoading()
						this.loading = false
						this.getList()
					},1000)
					
				}else if(res.data == 2){
					uni.showToast({
						title:'不可重复投票',
						icon:'error'
					})
					uni.hideLoading()
					this.loading = false
				}
				
			},
			
		},
		// onReachBottom(x) {
		// 	if (this.page * this.size >= this.total || this.loading) return
		// 	this.page ++
		// 	this.getList()
		// },
		onPullDownRefresh(x){
			
			this.page = 1;
			this.getList()
		},
		onShow(){
			if(this.$store.state.userInfo && this.$store.state.userInfo.residentialquarters_id == 0){
				uni.showToast({
					title:'业主认证后显示'
				})
			}else{
				this.getList()
			}
			
		},
		// onLoad(params){
			
		// 	this.getList()
		// }
	}
</script>

<style lang="scss" scoped>
	.img_list{
		display: flex;
		// flex-wrap: wrap;
		overflow-x: scroll;
		width: 100%;
		box-sizing: border-box;
		.img{
			width: 117px;
			    height: 117px;
			    display: inline-block;
			    overflow: hidden;
			    position: relative;
			    box-shadow: 0px 1px 3px 1px #cecece;
		}
		.img_row{
			width: 156rpx;
			height: 156rpx;
			margin-right: 16rpx;
			margin-bottom: 20rpx;
			position: relative;
			image{
				width: 156rpx;
				height: 156rpx;
			}
			.icon{
				position: absolute;
				right: -16rpx;
				top:-16rpx;
				z-index: 1;
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
			&:nth-child(4n) {
				margin-right: 0;
			}
		}
	}
	.page{
		padding-bottom: 120rpx;
	}
	.list1{
		padding:0 30rpx;
		width: 100%;
		box-sizing: border-box;
		margin-top: 30rpx;
		.row{
			margin-bottom: 34rpx;
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx;
			overflow: hidden;
			box-shadow: 0px 6rpx 12rpx 0rpx rgba(130,140,167,0.15); 
			.top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				padding: 0 32rpx;
				box-sizing: border-box;
				height: 80rpx;
				background: #f6f7fb;
				.left2{
					width: calc(100% - 60rpx);
					display: flex;
					justify-content: space-between;
					align-items: center;
					.default{
						width: 70rpx;
						height: 44rpx;
						line-height: 42rpx;
						text-align: center;
						border: 2rpx solid #fd7a22;
						box-sizing: border-box;
						border-radius: 6rpx;
						font-size: 24rpx;
						color:$theme;
					}
					.name{
						width: calc(100% - 86rpx);
						color:#0B0B0B;
						font-size: 24rpx;
						white-space:nowrap;
						overflow:hidden;
						text-overflow:ellipsis;
						word-break: break-all;
					}
				}
				.left{
					width: calc(100% - 60rpx);
					display: flex;
					align-items: center;
					.name{
						display: inline-block;
						color:#0B0B0B;
						font-size: 24rpx;
						white-space:nowrap;
						overflow:hidden;
						text-overflow:ellipsis;
						word-break: break-all;
					}
				}
				.right{
					
					.name{
						display: inline-block;
						color:#0B0B0B;
						font-size: 24rpx;
						white-space:nowrap;
						overflow:hidden;
						text-overflow:ellipsis;
						word-break: break-all;
					}
				}
				
			}
		}
		.info{
			width: 100%;
			padding: 30rpx 32rpx 48rpx;
			box-sizing: border-box;
			.info_row1{
				font-size: 36rpx;
				// line-height: 34rpx;
				color:#000;
				
			}
			.info_row2{
				color:#666666;
				font-size: 20rpx;
				margin-top: 20rpx;
				line-height: 28rpx;
				text{
					margin-left: 20rpx;
					&:first-child{
						margin-left: 0;
					}
				}
			}
		}
	}
	.list2{
		padding: 0 36rpx;
		width: 100%;
		box-sizing: border-box;
		.row{
			margin-bottom: 40rpx;
			border-radius: 16rpx;
			overflow: hidden;
			.top{
				width: 100%;
				padding: 22rpx 28rpx 22rpx;
				box-sizing: border-box;
				background: #1d2e41;
				color:#fff;
				display: flex;
				justify-content: space-between;
				// align-items: flex-start;
				.left{
					width: calc(100% - 160rpx);
					font-size: 28rpx;
					line-height: 32rpx;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
					word-break: break-all;
				}
				.right{
					text-align: right;
					display: flex;
					align-items: center;
					view:nth-child(2){
						margin-left: 20rpx;
					}
				}
			}
			.image{
				width: 100%;
				height: 368rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.bottom_box{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		color:#fff;
		font-size: 28rpx;
		width: 750rpx;
		height: 104rpx;
		line-height: 104rpx;
		background: linear-gradient(90deg,#ff9b03, #fcb74e);
		box-shadow: 0 0px 5px 0px #ff9e0c;
	}
	button[loading]::before{
		align-self:center
	}
	button{
		display: flex;
		justify-content: center;
		align-item:center;
		padding: 0;
		border-radius: 0;
	}
	button::after{
		border: none;
	}
	
	.toup{
		display: flex;
		    flex-wrap: wrap;
		    flex-direction: row;
		    justify-content: space-around;
	}
	.toupiao{
		align-items: center;
		    flex-direction: column;
		    justify-content: center;
		    display: flex;
	}
	.toupiaomingc{
		background: #fb4747;
		    padding: 0px 10px;
		    margin-bottom: 10px;
		    border-radius: 40px;
		    color: #fff;
		    box-shadow: 0px 1px 1px 1px #9e9e9e;
		    font-size: 14px;
		    width: 120px;
	}
	.toupiaomingc2{
		background: #999;
		    padding: 0px 10px;
		    margin-bottom: 10px;
		    border-radius: 40px;
		    color: #fff;
		    box-shadow: 0px 1px 1px 1px #9e9e9e;
		    font-size: 14px;
		    width: 120px;
	}
	.toupiaonum{
		font-size: 20px;
	}
	.tiaoz{
		position: fixed;
		    bottom: 0;
		    background: #ff4c4c;
		    width: 100%;
		    padding: 10px 10px;
		    text-align: center;
		    color: #fff;
		    box-shadow: 0px -1px 2px 1px #969696;
	}
</style>
